﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>viewer</title>

    <link href="viewer.css" rel="stylesheet" />
    <script src="viewer.js"></script>
</head>
<body>
    <div class="vieweritemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="vieweritem">
            <div class="viewertitle" data-win-bind="innerHTML: title"></div>
            <div class="vieweritemid hidden" data-win-bind="innerHTML: id"></div>
        </div>
    </div>
    <div class="viewergrouptemplate" data-win-control="WinJS.Binding.Template">
        <div class="groupheader">
            <h1 data-win-bind="innerHTML: title"></h1>
        </div>
    </div>
    <div class="viewer fragment">
        <header class="page-header" aria-label="Header content" role="banner">
            <button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle" data-win-res="{ innerHTML: 'ViewerTitle' }"></span>
            </h1>
        </header>
        <section class="page-section" aria-label="Main content" role="main">
            <div class="viewercontainer">
                <div data-win-control="WinJS.UI.SemanticZoom">
                    <div class="zoomedinlist"
                         data-win-control="WinJS.UI.ListView"
                         data-win-options="{
                         itemTemplate: select('.vieweritemtemplate'),
                         groupHeaderTemplate: select('.viewergrouptemplate'),
                         itemDataSource: HL.groupedViewerElements.dataSource,
                         groupDataSource: HL.groupedViewerElements.groups.dataSource,
                         layout: { type: WinJS.UI.ListLayout }
                     }"></div>
                    <div class="zoomedoutlist"
                         data-win-control="WinJS.UI.ListView"
                         data-win-options="{
                         itemTemplate: select('.viewergrouptemplate'),
                         itemDataSource: HL.groupedViewerElements.groups.dataSource,
                         layout: { type: WinJS.UI.GridLayout }
                     }"></div>
                </div>
            </div>
        </section>
    </div>
</body>
</html>
